// pages/analyse/report/report.js
import * as echarts from "../../../ec-canvas/echarts";
var Chart = null;
var Chart2 = null;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    /*
    ecStaffAct: {
      lazyLoad: true
    },*/
    ecHeat: {
      lazyLoad: true
    },
    BMIec:{
      onInit: function (canvas, width, height) {
        Chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(Chart);
        return Chart;
      }
    },
    weightec: {
      onInit: function (canvas, width, height) {
        Chart2 = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(Chart2);
        return Chart2;
      }
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    
  },

  getOption: function() {
    // 指定图表的配置项和数据
    var option = {
      //定义图标的标题和颜色
      title: {
        text: this.data.titlestr,
        left: 'center',
        textStyle:{
          color: '#37A2DA'
        }
        
      },
      color: ["#37A2DA"],
      //定义你图标的线的类型种类
      /*
      legend: {
        data: ['BMI'],
        top: 50,
        left: 'center',
        backgroundColor: '#99CCFF',
        z: 100
      },*/
      grid: {
        containLabel: true
      },
      //当你选中数据时的提示框
      tooltip: {
        show: true,
        trigger: 'axis',
        confine:true
      },
      //	x轴
      xAxis: {
        type: 'category',
        boundaryGap: false,
        //x轴数据
        data: this.data.dataX, 
        // x轴的字体样式
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000',
            fontSize: '14',
          }
        },
        // 控制网格线是否显示
        splitLine: {
          show: true,
          //  改变轴线颜色
          lineStyle: {
            // 使用深浅的间隔色
            color: ['#aaaaaa']
          }
        },
        // x轴的颜色和宽度
        axisLine: {
          lineStyle: {
            color: '#000',
            width: 1, //这里是坐标轴的宽度,可以去掉
          }
        }
        // show: false //是否显示坐标
      },
      yAxis: {
        x: 'center',
        type: 'value',
        //网格线
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        },
        // show: false
      },
      dataZoom: [{
        id: 'dataZoomX',
        type: 'slider',
        xAxisIndex: [0],
        filterMode: 'filter',
        startValue: this.data.dataX.length-7
      }],
      
      series: [{
        name: this.data.seriesname,
        type: 'line',
        smooth: false,
        data: this.data.dataY
      }]
    };
    return option;
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    var that = this;
    wx.cloud.callFunction({
      name: "getBodyData",
      data: {},
      success: res => {
        console.log(res);
        var tempdates;
        var tempweights;
        var tempBMIs;
        //当数据库查询到数据时
        if(res.result.length>0){
          tempdates = res.result.dates;
          tempBMIs = res.result.BMIs;
          tempweights = res.result.weights ;
        } else {//当数据库没有当前用户的数据数据时,显示提示框
          tempdates = ["today"];
          tempweights = [50];
          tempBMIs = [28];
          wx.showToast({
            title: '暂时没有您的记录',
            icon:'none',
            duration:2000
          })
        }
        that.setData({
          dataX: tempdates 
        })
        //先绘制BMI的折线图
        that.setData({
          dataY: tempBMIs,
          titlestr: "BMI指数变化",
          seriesname: "BMI"
        })
        Chart.setOption(this.getOption());

        //绘制weight的折线图
        that.setData({
          dataY: tempweights,
          titlestr: "体重变化（kg、公斤）",
          seriesname: "体重"
        })
        Chart2.setOption(this.getOption());
      },
      fail: err => {
        console.log(err)
      }
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})